@extends('app')

@section('css')
<style>
.site-tree, .site-content {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}

.site-tree {
    border-right: 1px solid #eee;
    width: 300px;
    height: 100vh;
    padding: 0 0 0 10px;
    background: #fff;
    overflow-y: auto;
    position: fixed;
    top:0;
    z-index: 999999;
}

.site-tree .layui-tree li h2 {
    line-height: 36px;
    border-left: 5px solid #009E94;
    margin: 15px 0 5px;
    padding: 0 10px;
    background-color: #f2f2f2;
    font-size: 14px;
}

.site-tree .layui-tree .site-tree-noicon a cite {
    padding-left: 15px;
}

.site-tree-noicon {
    line-height: 28px;
}

.site-tree .layui-tree li a em {
    font-size: 12px;
    color: #bbb;
    padding-right: 5px;
    font-style: normal;
}

.site-tree .layui-tree .layui-this a {
    color: #01AAED;
}

.site-tree .layui-tree li span {
    float: right;
    cursor: pointer;
    color: #333;
    margin: 0 3px;
}

.site-content {
    padding: 20px 0 10px 20px;
}

.site-footer {
    position: fixed;
    background: #fff;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
    width: 100%;
    padding: 10px 0;
    margin: 0;
    left: 0;
    bottom: 0;
    text-align: center;
}
a.anchorific, a.anchorjs-link {
    padding-left: 4px;
    color: #e2e2e2;
    display: none;
}
</style>

@endsection

@section('import')
    <link rel="stylesheet" href="{{asset('asset/style/global.css')}}" media="all">
    <link rel="stylesheet" href="{{asset('asset/style/modules/prism/prism.css')}}" media="all">
    <script src="{{asset('asset/style/modules/prism/prism.js')}}"></script>
@endsection

@section('content')

    {{--左侧--}}
    <div class=" layui-col-md2">
        <div class="site-tree">
            <div class="layui-form" style="height: 38px; margin: 10px 13px 0 0;">
                <select lay-filter="version">
                @forelse($doc_version as $key=>$item)
                    <option value="{{ $key }}" @if($version_id==$key) selected @endif>{{ $item }}</option>
                @empty
                    请添加版本
                @endforelse
                </select>
                <ul class="layui-tree">
                @forelse($doc_list as $item)
                    @if($item['pid']==0)
                        <li>
                            <h2>
                                {{ $item['name'] }}
                                <span class="layui-icon layui-icon-delete del-detail" data-id="{{ $item['id'] }}" title="删除"></span>
                                <span class="layui-icon layui-icon-edit edit-list" data-id="{{ $item['id'] }}" title="编辑"></span>
                                <span class="layui-icon layui-icon-add-1 add-child-list" data-id="{{ $item['id'] }}" title="添加子目录"></span>
                            </h2>
                        </li>
                    @else
                        <li class="site-tree-noicon @if(isset($list_id)&&$item['id']==$list_id) layui-this @endif" id="list-{{$list_id}}">
                        <a href="?doc_id={{$doc_id??''}}&version_id={{$version_id??key($version)}}&list_id={{$item['id']}}">
                            <cite>{{ $item['name'] }}</cite>
                        </a>
                        <span class="layui-icon layui-icon-delete del-detail" data-id="{{ $item['id'] }}" title="删除"></span>
                        <span class="layui-icon layui-icon-edit edit-detail" data-id="{{ $item['id'] }}" title="编辑"></span>

                    </li>
                    @endif
                @empty
                    <li>
                        <h2 >
                            暂无目录
                            <span class="layui-icon layui-icon-add-1" onclick="newWindow('添加目录', '/doc/info/add/list?version_id={{$version_id??key($doc_version)}}', 350, 250);"></span>
                        </h2>
                    </li>

                @endforelse
                </ul>
            </div>
        </div>
    </div>

    {{--右侧--}}
    <div class="layui-container" style="padding-bottom:60px ">
            <div class="layui-row layui-col-space15">
                <div class=" layui-col-md2">
                </div>
                <div class="layui-col-md10 content detail">
                    <div class="fly-panel detail-box"  style="box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);">
                        <div class="detail-body layui-text photos" style="margin: 0;padding: 0">
                            <div class="code-toolbar">
                               {!! $doc_detail->content??'暂无文档内容' !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <div class="site-footer">
            <button class="layui-btn" id="add-version">添加版本</button>
            <button class="layui-btn layui-btn-primary" id="add-list">添加目录</button>
        <button class="layui-btn" id="sort-list">保存排序</button>
    </div>
@endsection

@section('js')
    <script>
    layui.use(['jquery', 'form'], function () {
        var $ = layui.$;
        var form = layui.form;

        form.on('select(version)', function (data) {
            location.replace('?doc_id={{$doc_id}}&version_id=' + data.value);
        });

        //添加版本
        $('#add-version').click(function () {
            newWindow($(this).text(), '/doc/info/add/version?doc_id={{$doc_id??''}}', 400, 180);
        })

        //添加目录
        $('#add-list').click(function () {
            newWindow($(this).text(), '/doc/info/add/list?version_id={{$version_id??key($doc_version)}}', 350, 250);
        })

        //添加子目录
        $('.add-child-list').click(function () {
            var pid = $(this).attr('data-id');
            layer.full(layer.open({
                type: 2,
                title: '编辑文档',
                shade: false,
                content:'/doc/info/edit/detail?version_id={{$version_id??key($doc_version)}}&pid=' + pid,
                maxmin: true
            }))
        })

        //编辑目录
        $('.edit-list').click(function () {
            var id = $(this).attr('data-id');
            layer.open({
                type: 2,
                title: '编辑目录',
                shade: false,
                content:'/doc/info/add/list?version_id={{$version_id??key($doc_version)}}&id='+id,
                area: ['350px', '250px'],
            })
        })
        //删除
        $('.del-detail').click(function(){
            var id = $(this).attr('data-id');
            layer.confirm("你确定删除目录吗？如果存在下级导航则一并删除，此操作不能撤销！", {icon: 3, title:'提示'},
                function(index){//确定回调
                    $.ajax({
                        url:'/doc/info/del',
                        data:{id:id},
                        success:function(data){
                            layer.alert(data.msg,{icon: 1},function () {
                                // location.reload('treeTable');
                                location.reload();
                                layer.closeAll();
                            });
                        }
                    })
                },function (index) {//取消回调
                    layer.close(index);
                }
            );
        })

        //监听目录滑块
        $(function () {
            var top = $("li.site-tree-noicon.layui-this").offset().top-100;
            $(".site-tree").scrollTop(top);
        })

        //编辑内容
        $('.edit-detail').click(function(){
            var list_id = $(this).attr('data-id');
            layer.full(layer.open({
                type: 2,
                title: '编辑文档',
                shade: false,
                content:'/doc/info/edit/detail?list_id='+list_id,
                maxmin: true
            }))
        })
    })
</script>
@endsection